<template>
  <div>
    <el-container>
      <el-aside :width="asideWidth" style="height: 100vh; background-color: #001529">
        <div style="height: 60px;
                    color: white;
                    display: flex;
                    align-items: center;
                    justify-content: center;">
          <img src="@/assets/logo.png" alt="" style="height: 30px; width: 30px">
          <span style="margin-right: 20px; font-size: 25px; font-family: 华文行楷" v-show="!isCollapse">廉洁校园</span>
        </div>
        <!--
        :default-active="$route.path"  当前路由高亮
        router   可以点击跳转
        -->
        <el-menu style="border: none"
                 :default-active="$route.path"
                 router
                 background-color="#001529"
                 active-text-color="#fff"
                 text-color="rgba(255,255,255,0.65)"
                 :collapse="isCollapse"
                 :collapse-transition="false">
          <el-menu-item index="/home">
            <i class="el-icon-s-home"></i>
            <span slot="title">系统首页</span>
          </el-menu-item>

          <el-submenu index="1" v-if="user?.identity === '1' || user?.identity === '2'">
            <template slot="title">
              <i class="el-icon-s-order"></i>
              <span>考评管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/status">考评状态</el-menu-item>
              <el-menu-item index="/setGroup">评估组分配</el-menu-item>
              <el-menu-item index="/score">查看结果</el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="2" v-if="user?.identity === '1'">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>信息管理</span>
            </template>
            <el-menu-item index="/user">用户管理</el-menu-item>
          </el-submenu>

          <el-submenu index="3" v-if="user?.identity === '1' || user?.identity === '2'">
            <template slot="title">
              <i class="el-icon-tickets"></i>
              <span>指标管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/criterion">查看指标</el-menu-item>
              <el-menu-item index="/criterionUpdate">编辑指标</el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="4" v-if="user?.identity === '1' || user?.identity === '2'">
            <template slot="title">
              <i class="el-icon-s-custom"></i>
              <span>评估组管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/expertGroup">总览</el-menu-item>
              <el-menu-item index="/experts">评估组设置</el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-menu-item index="/gInput" v-if="user?.identity === '3' || user?.identity === '4'">
            <i class="el-icon-position"></i>
            <span slot="title">信息填报</span>
          </el-menu-item>

          <el-menu-item index="/getScore" v-if="user?.identity === '3' || user?.identity === '4'">
            <i class="el-icon-s-claim"></i>
            <span slot="title">成绩查看</span>
          </el-menu-item>

          <el-menu-item index="/assess" v-if="user?.identity === '5'">
            <i class="el-icon-position"></i>
            <span slot="title">评估</span>
          </el-menu-item>

        </el-menu>
      </el-aside>

      <el-container>
        <el-header>

          <i :class="collapseIcon" style="font-size: 26px" @click="handCollapse"></i>
          <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-left: 20px;">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: $route.path }">{{ this.$route.meta.name }}</el-breadcrumb-item>
          </el-breadcrumb>

          <div style="flex: 1; width: 0; display: flex; align-items: center; justify-content: flex-end">
            <!-- placement="bottom"  下拉靠中间-->
            <el-dropdown placement="bottom">
              <div style="margin-right: 10px; cursor: default">
                <i class="el-icon-user"></i>
                <span style="margin-left: 5px">{{ username }}</span>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="getInfo">个人信息</el-dropdown-item>
                <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>

          </div>

        </el-header>
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>

  </div>
</template>

<script>
import request from "@/urils/request";

export default {
  name: 'HomeView',
  data() {
    return {
      isCollapse: false,
      asideWidth: "200px",
      collapseIcon: 'el-icon-s-fold',
      user: JSON.parse(localStorage.getItem('user') || '{}'),
      username: '',
    }
  },
  methods: {
    handCollapse() {
      this.isCollapse = !this.isCollapse
      this.asideWidth = this.isCollapse ? '64px' : '200px'
      this.collapseIcon = this.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'
    },
    logout(){
      localStorage.removeItem("user")
      this.$router.push("/login")
      this.$message.success("退出成功")
    },
    getInfo(){
      this.$router.push("/info")
    }
  },
  mounted() {
    if(!this.user.id){
      this.$router.push("/login")
    }
    if(this.user.name === ''){
      this.user.name = this.user.role
    }
    this.username = this.user.name
  }
}
</script>


<style>
.el-menu--inline .el-menu-item {
  background-color: #000c17 !important;
}

.el-menu-item:hover, .el-submenu__title:hover {
  color: #fff !important;
}

.el-submenu__title:hover i {
  color: #fff !important;
}

.el-menu-item.is-active {
  background-color: #40a99f !important;
}

/*动画效果*/
.el-aside {
  transition: width 0.15s;
  -webkit-transition: width 0.15s;
  -moz-transition: width 0.15s;
  -webkit-transition: width 0.15s;
  -o-transition: width 0.15s;

}

.el-header {
  box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
  display: flex;
  align-items: center;
}

.el-main {
  position: absolute;
  left: 200px;
  right: 0;
  top: 60px;
  bottom: 0;
  overflow-y: scroll;
}


</style>